<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>

    <script src="https://www.amaoee.cn/assets/js/vue.min.js"></script>
    <style>
        .content-wrap {
            background-color: #FFFFFF;
            border-radius: 4px;
            padding: 15px;
        }

        .second-box {
            margin-top: 15px;
            margin-left: 10px;
        }

        .second-border {
            display: inline-block;
            border: 1px solid #EEEEEE;
            border-radius: 4px;
        }

        .second-box .second-item {
            padding: 8px 10px;
            display: inline-block;
            cursor: pointer;

        }

        .second-box .second-item.active {
            color: #18bc9c;
        }

        .third-box {
            margin-top: 15px;
            margin-left: 10px;
        }

        .third-border {
            display: inline-block;
            border: 1px solid #EEEEEE;
            border-radius: 4px;
        }

        .third-box .third-item {
            padding: 8px 10px;
            display: inline-block;
            cursor: pointer;

        }

        .third-box .third-item.active {
            color: #18bc9c;
        }

        .third-txt {
            float: right;
            cursor: pointer;
            border-radius: 4px;
            padding: 6px 10px;
            display: inline-block;
            margin-right: 48px;
            margin-top: 10px;
            /* margin-top: -20px; */
            border: 1px solid #18bc9c;
            background-color: #18bc9c;
            color: #FFFFFF;
        }

        a {
            color: #FFFFFF;
        }

        a:hover {
            color: #FFFFFF;
        }

        .first-box {}

        .first-item {
            cursor: pointer;
            border-radius: 4px;
            padding: 6px 10px;
            display: inline-block;
            margin: 10px 10px 0 10px;
            border: 1px solid #EEEEEE;
            background-color: #FFFFFF;
            color: #333;
        }

        .first-box .second-item {
            float: right;
            cursor: pointer;
            border-radius: 4px;
            padding: 6px 10px;
            display: inline-block;
            margin: 10px 0px 0 10px;
            border: 1px solid #18bc9c;
            background-color: #18bc9c;
            color: #FFFFFF;
        }

        .first-item.active {
            border: 1px solid #18bc9c;
            background-color: #18bc9c;
            color: #FFFFFF;
        }

        .item-top {
            display: flex;
        }

        .item-info {
            font-size: 18px;
            margin: 15px 0 0 30px;
        }

        .item-info:first-child {
            margin-left: 10px;
        }

        .item-bg {
            width: 95%;
            margin: 50px auto;
            overflow-x: auto;
        }

        table {
            width: 95%;
            margin: 50px auto;
            text-align: center;
        }

        th,
        td {
            text-align: center;
            height: 50px;

        }

        .item-check {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            background-color: #BBBBBB;
            margin: 0 auto;
        }

        .item-title {
            position: fixed;
            width: 150px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.8);
            top: 50%;
            left: 50%;
            text-align: center;
            line-height: 50px;
            color: #FFFFFF;
            transform: translate(-50%, -50%);
        }

        .item-input {
            position: fixed;
            width: 200px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.6);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #FFFFFF;
        }
    </style>

</head>
<body>
<div class="content-wrap" id="app">
    <div class="item-box">
        <div class="item-top">
            <div class="item-info">
                客户编号：{$user_info.id}
            </div>
            <div class="item-info">
                用户名：{$user_info.nickname}
            </div>
            <div class="item-info">
                {$user_info.mobile}
            </div>
            <div class="item-info">
                性别：{$user_info.gender}
            </div>
            <div class="item-info">
                年龄：18
            </div>
        </div>
    </div>
    <div class="item-title" v-if="title">{{title_txt}}</div>
    <div class="first-box">
        <div class="first-item" :class="{active:index==current}" v-for="(item,index) in info"><span
                @click="getlist(item,index)"> {{item.name}}</span></div>
        <span class="second-item" v-if="itemList.length>0" style="margin-right: 300px;"
              @click="goout()">导出</span>
        <span class="second-item" v-if="son_list.length>0" @click="goInput()">导入</span>
    </div>
    <div class="item-input" v-if="item_input">
        <input class="input-flie" type="file" name="photo" id="photo" value="">
        <input class="input-btn" type="button" @click="postData();" value="上传" name=""
               style="width:100px;height:30px;">
        <div class="" @click="getnone()">
            取消
        </div>
    </div>
    <div class="second-box" v-if="son_list.length>0">
        <div class="second-border">
					<span class="second-item" :class="{active:index==son_current}" v-for="(item,index) in son_list"
                          @click="getclass(item.id,index)">{{item.name}}</span>
        </div>
    </div>
    <div class="third-box" v-if="sson_list.length>0">
        <div class="third-border">
					<span class="third-item" :class="{active:index==sson_current}" v-for="(item,index) in sson_list"
                          @click="getsheet(item,index)">{{item.name}}</span>
        </div>
    </div>
    <div class="third-box" v-if="sheetlist!=''">
        <div class="third-border">
					<span class="third-item" :class="{active:index==sheet_current}" v-for="(item,index) in sheetlist"
                          @click="getdetail(topicid,item.sheet,index,item.remark)">{{item.remark}}</span>
        </div>
    </div>
    <div class="third-txt" v-if="itemList.length>0">
        <a href="http://www.healthy.test/TyQEOGLsfv.php/user.user/compare">报告对比分析</a>
    </div>
    <div class="item-bg" v-if="itemListTitle.length>0">
        <table border="" cellspacing="" cellpadding="">
            <tr>
                <th style="width: 50px; min-width: 50px;">
                    <input type="checkbox" name="" id="" :checked="check1" value="" @click="changeCheck()" />
                </th>
                <th v-for="(item,index) in itemListTitle" style="min-width: 150px;">{{item.attr_name}}</th>
                <!-- <th style="width: 50px; min-width: 50px;">操作</th> -->
            </tr>
            <tr v-for="(item, index) in itemList">
                <td>
                    <input type="checkbox" name="" id="" value="" :checked="check" @click="getExport(item)" />
                </td>
                <td v-for="(items, indexs) in item">
                    <div style="width: 100px;outline: none;margin: 0 auto;" class="" contenteditable="input"
                         @click="getid(items.id)" @blur="handleInput">
                        {{items.attr_value}}
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            id: '',
            check: false,
            check1: false,
            content: '',
            info: {},
            current: -1,
            son_current: -1,
            sson_current: -1,
            sheet_current: -1,
            son_list: [],
            sson_list: [],
            sheetlist: {},
            topicid: '',
            itemList: [],
            itemListTitle: [],
            kind: [],
            name: '',
            sheet: '',
            item: [],
            data: '',
            item_kind: [],
            title: false,
            title_txt: '导出成功',
            flag: 0,
            admin_id: "{$admin_id}",
            user_id: "{$user_info.id}",
            item_input: false,
            class_id: ''

        },
        created() {
            this.init();
        },
        methods: {
            getnone(){
                this.item_input=false
            },
            saveinfo() {

            },
            goCompare() {
                "{{:url('user/user/compare')}}"
            },
            postData() {
                this.item_input = false
                var formData = new FormData();
                formData.append("file", $("#photo")[0].files[0]);
                formData.append("user_id", this.user_id);
                formData.append("class_id", this.class_id);
                formData.append("service", 'App.Passion.UploadFile');
                $.ajax({
                    url: 'http://www.healthy.test/api/health_classify/data_import',
                    /*接口域名地址*/
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {


                    }
                })
            },
            goInput() {
                this.item_input = true
            },
            getExport(item) {
                if (this.item_kind.indexOf(item) == -1) {
                    this.item_kind.push(item);
                } else {
                    const num = this.item_kind.indexOf(item);
                    this.item_kind.splice(num, 1);
                }
                console.log(this.item_kind)
            },
            goout() {
                this.kind = []
                this.item = []
                if (this.flag == 1) {
                    return false;
                }
                if (this.item_kind.length == 0 && this.check == false) {
                    this.flag = 1
                    console.log(this.flag)
                    this.title_txt = '请选择数据再导出'
                    this.title = true
                    var timer = setInterval(() => {
                        this.title = false
                        this.flag = 0
                        clearInterval(timer)
                    }, 1000);
                    return;
                } else if (this.item_kind.length > 0) {
                    this.item_kind.forEach(item => {
                        item.forEach((items, index) => {
                            if (index == 1) {
                                var kind_attr = items.attr_value
                                var kind_id = items.id
                                var kind_data = {}
                                kind_data.id = kind_id
                                kind_data.attr_value = kind_attr
                                this.kind.push(kind_data)
                            } else if (index == 2) {
                                var item_attr = items.attr_value
                                var item_id = items.id
                                var item_data = {}
                                item_data.id = item_id
                                item_data.attr_value = item_attr
                                this.item.push(item_data)
                            }
                        })
                    })
                    var _kind = JSON.stringify(this.kind)
                    var _item = JSON.stringify(this.item)
                    $.ajax({
                        type: 'POST',
                        url: "http://www.healthy.test/index.php/api/health_classify/exportToUser",
                        data: {
                            kind: _kind,
                            name: this.name,
                            sheet: this.sheet,
                            item: _item,
                            user_id: this.user_id,
                            admin_id: this.admin_id,
                            content: 'content',
                            type: 1
                        },
                        dataType: 'json',
                        success: (res) => {
                            if (this.flag == 1) {
                                return;
                            }
                            this.flag = 1
                            this.title_txt = '导出成功'
                            this.title = true
                            var timer = setInterval(() => {
                                clearInterval(timer)
                                this.title = false
                                this.flag = 0

                            }, 1000);
                            return;
                        }
                    })
                } else if (this.check == true) {
                    this.itemList.forEach(item => {
                        item.forEach((items, index) => {
                            if (index == 1) {
                                var kind_attr = items.attr_value
                                var kind_id = items.id
                                var kind_data = {}
                                kind_data.id = kind_id
                                kind_data.attr_value = kind_attr
                                this.kind.push(kind_data)
                            } else if (index == 2) {
                                var item_attr = items.attr_value
                                var item_id = items.id
                                var item_data = {}
                                item_data.id = item_id
                                item_data.attr_value = item_attr
                                this.item.push(item_data)
                            }
                        })
                    })
                    var _kind = JSON.stringify(this.kind)
                    var _item = JSON.stringify(this.item)
                    $.ajax({
                        type: 'POST',
                        url: "http://www.healthy.test/index.php/api/health_classify/exportToUser",
                        data: {
                            kind: _kind,
                            name: this.name,
                            sheet: this.sheet,
                            item: _item,
                            user_id: this.user_id,
                            admin_id: this.admin_id,
                            content: 'content',
                            type: 1
                        },
                        dataType: 'json',
                        success: (res) => {
                            if (this.flag == 1) {
                                return;
                            }
                            this.flag = 1
                            this.title_txt = '导出成功'
                            this.title = true
                            var timer = setInterval(() => {
                                clearInterval(timer)
                                this.title = false
                                this.flag = 0

                            }, 1000);
                            return;
                        }
                    })
                }

            },
            changeCheck() {
                this.check = !this.check
            },
            handleInput($event) {
                this.content = $event.target.innerText;
                console.log(this.id, this.content)
                $.ajax({
                    type: 'POST',
                    url: "http://www.healthy.test/index.php/api/health_classify/editItem",
                    data: {
                        id: this.id,
                        item: this.content
                    },
                    dataType: 'json',
                    success: (res) => {

                    }
                })
                // 拓展 如果想要只需要前100位数据
                //this.content = this.content.substring(0,100)
            },
            getid(id) {
                this.id = id
            },
            init() {
                $.ajax({
                    type: 'POST',
                    url: "http://www.healthy.test/index.php/api/health_classify/classify",
                    data: {},
                    dataType: 'json',
                    success: (res) => {
                        if (res.code == 1) {
                            this.info = res.data;
                        }
                    }
                })
            },
            getlist(item, index) {
                this.sson_list = []
                this.current = index
                this.son_list = item.son_list
                this.sheetlist = []
                this.itemListTitle = []
                this.itemList = []
            },
            getclass(id, index) {
                this.son_current = index
                this.sson_list = []
                this.sheetlist = []
                this.itemListTitle = []
                this.itemList = []
                this.class_id = id
                $.ajax({
                    type: 'POST',
                    url: "http://www.healthy.test/index.php/api/health_classify/getTopicList",
                    data: {
                        class_id: id.toString(),
                        user_id: this.user_id,

                    },
                    dataType: 'json',
                    success: (res) => {
                        if (res.code == 1) {
                            this.sson_list = res.data
                            this.sheetlist = []
                        }
                    }
                })
            },
            getsheet(item, index) {
                this.name = item.name
                this.sson_current = index
                this.topicid = item.id
                this.sheetlist = item.sheet_list
                this.itemListTitle = []
                this.itemList = []
            },
            getdetail(topicid, sheetid, index, sheet) {
                this.check = false
                this.item_kind = []
                this.kind = []
                this.item = []
                this.sheet = sheet
                this.itemListTitle = []
                this.itemList = []
                this.sheet_current = index
                const info = {
                    topic_id:topicid,
                    sheetid:sheetid,
                    classid:this.class_id,
                    user_id:this.user_id
                };
                sessionStorage.setItem('info', JSON.stringify(info));
                var topicid = topicid.toString()
                var sheet = sheetid.toString()
                $.ajax({
                    type: 'POST',
                    url: "http://www.healthy.test/index.php/api/health_classify/getKindItem",
                    data: {
                        topic_id: topicid,
                        sheet: sheetid,
                        user_id: this.user_id,

                    },
                    dataType: 'json',
                    success: (res) => {
                        if (res.code == 1) {
                            this.itemListTitle = res.data.title
                            this.itemList = res.data.content
                        }
                    }
                })
            }
        }
    })
</script>
</body>
</html>
